<template>
    <div class="tagsBox clearfix">
        <!-- 向左滑按钮 -->
        <span 
            class="leftFloat normalicon cursorPointer "
        >
            <el-icon><DArrowLeft /></el-icon>
        </span>
        <div class="menuBox">

        
        <el-scrollbar>
            <div class="scrollbar-flex-content">
                <el-tag
                class="cursorPointer  u_mr_5 scrollbar-demo-item"
                    :key="tag.meta.name"
                    v-for="(tag,index) in state.tagsList"
                    :closable="tag.meta.name !== 'workbench'"
                    :disable-transitions="false"
                    @close="handleClose(tag, index)"
                    @click="changeMenu(tag,tag.name)"
                    :effect="$route.name === tag.name  && $route.query.id == tag.meta.id ? 'dark' : 'plain'"
                    >{{ tag.meta.name }}</el-tag>
           
            </div>
        </el-scrollbar>
        </div>


     <!-- 右侧按钮合集 -->
        <span
            class="cursorPointer rightFloat normalicon"
            @click="closeAll"
        >
        <el-tooltip
                class="box-item"
                effect="dark"
                content="关闭全部标签页"
                placement="bottom-end"
                
            >
            <el-icon><CloseBold /></el-icon>
        </el-tooltip>
            
        </span>
        
        <span
            class="cursorPointer rightFloat normalicon"
            @click="resetNowPage"
        >
        <el-tooltip
                class="box-item"
                effect="dark"
                content="刷新当前页"
                placement="bottom-end"
            >
            <el-icon><RefreshRight /></el-icon>
        </el-tooltip>
        </span>

        <span
            class="cursorPointer rightFloat normalicon"
        >
            <el-icon><DArrowRight /></el-icon>
        </span>
        <!-- 右侧按钮结束 -->
    </div>
</template>

<script lang="ts" setup>

import {useStore} from "vuex";
import { defineComponent, reactive ,computed, ref, watch} from "vue";
import { useRouter,useRoute } from "vue-router";
import MENU from "./navMenu.vue";


const store = useStore();
const route = useRoute();
const router = useRouter();

let state: any = reactive({
    tagsList: computed(() => store.getters.getTagsList),
});

let closeAll = () => {
    let list = [{
            "component": () => import("@/views/board/workbench.vue"),
            "path": "/workbench",
            "name":"workbench",
            "meta":{
                "icon": "Monitor",
                "name": "工作台",
            },
        }];
    store.commit("getTagsList",list)
    router.push({ name:'workbench'});
    localStorage.setItem('tagsList',JSON.stringify(list))
}
let resetNowPage = () => {
    router.go(0)
}
let handleClose = (item:any , index:number) => {
    store.dispatch("DEL_TAG", item)
}
let changeMenu = (item: any,name:any) => {
    store.dispatch("ADD_TAG", item)
    router.push({ name:item.name ,query: {id:item.meta.id}});
}

watch(state.tagsList,()=>{
    localStorage.setItem('tagsList',JSON.stringify(state.tagsList))
})

</script>

<style lang="scss" scoped>
    .tagsBox{
        width: 100%;
        height: 30px;
        background: #fff;
        border-top: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
        box-shadow: 2px 2px 4px rgba(0,0,0,.4)!important;
        .normalicon{
            display: inline-block;
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            top: -10px;
        }
        .menuBox{
            width: calc(100% - 140px);
            float: left;
            .allMenu{
                width: auto;
            }
            
        }
    }
    .scrollbar-flex-content{
        display: flex;
    }
    .scrollbar-demo-item {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
    }
</style>